<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-30 17:15:36
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-06-26 14:18:57
 * @FilePath: /tea-garden-web/src/components/component-legend-equipment.vue
 * @Description: 设备图例
-->
<template>
  <div
    class="component-legend-equipment"
    v-if="legends.equipment && allEquipment.length > 0"
  >
    <div class="content">
      <div class="title">设备信息</div>
      <section
        class="equipment"
        v-for="(item, index) in allEquipment"
        :key="index"
      >
        <i class="icon" :class="[`icon-${item.type_}`]" />
        <span class="name" v-text="item.equipment_name"></span>
      </section>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('base-overview', ['legends', 'allEquipment'])
  }
}
</script>

<style lang="scss">
.component-legend-equipment {
  background: rgba(51, 51, 51, 0.8);
  border-radius: 5px 5px 5px 5px;
  // padding: 10px 17px;
  padding: 10px 10px;
  .content {
    .title {
      font-size: 14px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
    }
    .equipment {
      margin-top: 14px;
      .icon{
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: top;
        background-size: cover;
      }
      .icon-1188 {
        background-image: url('/public/image/equipment/icon-1188.png');
      }
      .icon-89 {
        background-image: url('/public/image/equipment/icon-89.png');
      }
      .icon-90 {
        background-image: url('/public/image/equipment/icon-90.png');
      }
      .icon-91 {
        background-image: url('/public/image/equipment/icon-91.png');
      }
      .icon-92 {
        background-image: url('/public/image/equipment/icon-92.png');
      }
      .icon-93 {
        background-image: url('/public/image/equipment/icon-93.png');
      }
      .icon-94 {
        background-image: url('/public/image/equipment/icon-94.png');
      }
      .name {
        font-size: 12px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #ffffff;
        margin-left: 6px;
      }
    }
  }
}
</style>
